<template>
  <main-card :title="detailData.modelName" :loading="getDictionLoading" :crumbs="crumbs" :main-body-style-obj="{ paddingBottom: 0 }">
    <switch-tabs :tabs="tabList" :selected-tab="selectedTab" @switchTab="selectSwitchTable" />
    <template #tool-btn>
      <collect-button
        msg="是否取消收藏此模型？"
        :show-default-text="true"
        :default-status="detailData?.isFavorite"
        :favorite-obj-type="4"
        :favorite-obj-name="detailData?.modelName"
        :favorite-obj-id="detailData?.id"
      />
    </template>
    <div class="w-1376 tabs-box">
      <div style="width: 1026px">
        <component :is="compMap[selectedTab]" :prop-value="detailData" />
      </div>
      <div class="box-right line-border">
        <div class="title-text-box">
          <div class="title-text">{{ detailData.modelName }}</div>
        </div>
        <div class="my-scrollbar content">
          <div class="text-spans">
            <div v-for="(item, index) in detailData?.commonModelLabelVOList" :key="index" :title="(item.labelName as string)">
              <div class="span-border yc">{{ item.labelName }}</div>
            </div>
          </div>
          <div class="size-time">
            <span class="size-time-font">{{ sizeFilter(detailData.modelSize as number) }}</span>
            <span class="line"></span>
            <span class="size-time-font">{{ dateFormat(detailData?.createTime as string) }}</span>
          </div>
          <div class="main-text">
            {{ detailData.description }}
          </div>
        </div>
      </div>
    </div>
  </main-card>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import { dateFormat, sizeFilter } from 'g6-fn'
  import { computed, ref } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute } from 'vue-router'

  import CollectButton from '@/components/CollectButton/index.vue'
  import SwitchTabs from '@/components/SwitchTabs/index.vue'
  import { isMinioFileExist, modelLibraryApi } from '@/services/api'
  import { openModelVisualPage } from '@/utils'

  import { DetailType } from '../list/types'
  import ModelCode from './components/ModelCode.vue'
  import ModelDocument from './components/ModelDocument.vue'

  interface Tab {
    name: string
    key: string
  }
  let route = useRoute()
  const prePagePath = route.query.prePagePath as string
  const prePageName = route.query.prePageName as string

  const { id } = route.params as { id: string }
  const detailData = ref<DetailType>({})

  const crumbs = computed(() => {
    return [
      { path: prePagePath || '/model-base/list/public-model', name: prePageName || `模型库` },
      { name: `${detailData.value.modelName || ''}` }
    ]
  })
  const compMap: { [key in string]: any } = {
    modelCode: ModelCode,
    modelDocument: ModelDocument
  }
  const tabList = ref<Tab[]>([
    {
      name: '模型文档',
      key: 'modelDocument'
    },
    {
      name: '模型代码',
      key: 'modelCode'
    },
    {
      name: '模型可视化',
      key: 'modelVisual'
    }
  ])

  let selectedTab = ref<string>('modelDocument')

  const selectSwitchTable = async (key: string) => {
    if (key !== 'modelVisual') {
      selectedTab.value = key
      return
    }

    if (detailData.value.isVisualize === false) {
      message.info('此模型暂不支持解析')
      return
    }

    // const isExist = await isMinioFileExist(detailData.value.modelFileUrl || '')
    // if (!isExist) {
    //   message.error('文件不存在')
    //   return
    // }

    openModelVisualPage(detailData.value.visualizeFilePath || '')
  }

  /*----------------------------------------- 详情 --------------------------------*/
  const { loading: getDictionLoading, runAsync: getDetail } = useRequest<ResponseData<DetailType>>(
    (id: string) => modelLibraryApi.commonModelDetail(id)(),
    {
      onSuccess: ({ data }) => {
        Object.assign(detailData.value, data)
        console.log(data, 'getDetail')
        if (detailData.value.modelFileUrl) {
          return
        }
        const visualIndex = tabList.value.findIndex(item => item.key === 'modelVisual')
        if (visualIndex !== -1) {
          tabList.value.splice(visualIndex, 1)
        }
      }
    }
  )

  getDetail(id)
</script>
<style lang="less" scoped>
  .page {
    display: flex;
    place-content: flex-start center;
    flex-wrap: wrap;
    padding: 0;
    width: 100%;
  }

  .box-right {
    // overflow-y: scroll;
    padding: 20px;
    padding-right: 0;
    width: 328px;
    // max-height: 650px; 574
  }

  .content {
    overflow-y: auto;
    padding-right: 20px;
    max-height: 574px;
  }

  .line-border {
    background: #fff;
    border: 1px solid @border1;
    border-radius: 10px;
  }

  .title-text-box {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    // height: 36px;
  }

  .title-text {
    color: @text01;
    .font16b();
  }

  .text-spans {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .span-border {
    padding: 3px 6px;
    // max-width: 60px;
    // width: 65px;
    // max-width: 65px;
    height: 26px;
    text-align: center;
    color: #8599bf;
    border: 1px solid @mask1;
    border-radius: 6px;
    line-height: 26px;
  }

  .yc {
    overflow: hidden;
    font-size: 12px;
    font-family: 'Noto Sans SC';
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }

  .size-time {
    display: flex;
    align-items: center;
    margin: 12px 0;
    gap: 20px;

    .size-time-font {
      font-size: 14px;

      /* Font14 */
      font-family: 'Noto Sans SC';
      color: @text03;
      font-style: normal;
      font-weight: 400;
      line-height: 22px; /* 157.143% */
    }

    .line {
      width: 1px;
      height: 12px;
      background: rgba(0, 0, 0, 0.05);
    }
  }

  .main-text {
    overflow-y: auto;
    // max-height: 489px;
    font-size: 14px;
    font-family: 'Noto Sans SC';
    text-align: justify;
    color: var(--text-text-color-3, rgba(17, 22, 31, 0.52));
    align-self: stretch;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
  }

  .tabs-box {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-top: 16px;
  }

  .bottom-tooltip {
    display: flex;
    align-items: flex-start;
    max-width: 688px;
    flex-wrap: wrap;
    gap: 6px;
  }

  .base-label {
    /* display: flex; */
    justify-content: center;
    align-items: center;
    padding: 3px 6px;
    border: 1px solid var(--mask-1, rgba(0, 0, 0, 0.05));
    border-radius: 6px;
    gap: 6px;
  }

  .label-text {
    overflow: hidden;
    max-width: 72px;
    font-size: 12px;
    font-family: 'Noto Sans SC';
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-text-color-3, rgba(17, 22, 31, 0.52));
    font-weight: 400;
    line-height: 20px; /* 166.667% */
    word-break: keep-all;
  }
</style>
../../types
